<template>
  <div>
    <v-touch v-on:swipeleft="onSwipeLeft" v-on:swiperight="onSwipeRight" tag="div">
      <tab v-model="selectedIndex">
        <tab-item :selected="selectedIndex==0" @on-item-click="handler(0)">store</tab-item>
        <tab-item :selected="selectedIndex==1" @on-item-click="handler(1)">center</tab-item>
        <tab-item :selected="selectedIndex==2" @on-item-click="handler(2)">dev</tab-item>
        <tab-item :selected="selectedIndex==3" @on-item-click="handler(3)">roam</tab-item>
      </tab>
      <operation-content :operateType="operate"></operation-content>
    </v-touch>
  </div>
</template>

<script>
  import {Tab, TabItem} from 'vux'
  import OperationContent from './page2/OperationContent'

  export default {
    name: "Stores",
    components: {Tab, TabItem, OperationContent},
    created() {
      // this.$emit('showTitle', '维护')
      // this.$emit('selectTabbar', [false, true, false])
    },
    methods: {
      onSwipeLeft() {
        this.selectedIndex = (this.selectedIndex + 3) % 4
      },
      onSwipeRight() {
        this.selectedIndex = (this.selectedIndex + 1) % 4
      },
      handler(i) {
        this.selectedIndex = i
        if (this.selectedIndex == 0) {
          this.operate = 'store'
        } else if (this.selectedIndex == 1) {
          this.operate = 'center'
        } else if (this.selectedIndex == 2) {
          this.operate = 'dev'
        } else if (this.selectedIndex == 3) {
          this.operate = 'roam'
        }
      }
    },
    data() {
      return {
        selectedIndex: 0,
        operate: 'store'
      }
    }
  }
</script>

<style scoped>

</style>
